<template>
    <p>{{state.count}}</p>
    <button @click="add">+</button>
    <button @click="minus">-</button>
    <p>{{state.home.city}}</p>
    <button @click="changeCity">修改city</button>
</template>
<script>
import {reactive} from 'vue';
//1.使用reactive把一个普通对象转化成响应式对象
//2.你可以直接访问或修改reactive对象的属性，无需使用.value
//3.在模板里也可以直接使用reactive对象的属性
//4.Reactive不会转化基本数据类型的值，只能处理对象类型
export default {
    setup(){
        //Reactive.vue:14 value cannot be made reactive: 0
        const state = reactive({
            count:0,
            home:{
                city:'beijing'
            }
        });
        const add = ()=>state.count++;
        const minus = ()=>state.count--;
        const changeCity = ()=>state.home.city = 'shanghai'
        return {
            state,
            add,
            minus,
            changeCity
        }
    }
}
</script>